<template>
  <div class="account-settings-info-view">
    <a-row :gutter="16">
      <a-col :md="24" :lg="16">
        <a-spin :spinning="confirmLoading">
          <a-form :form="form" >
            <a-form-item label="角色">
              <a-input :readOnly="true" v-model="userInfo().roleName" placeholder="角色" />
            </a-form-item>

            <a-form-item label="用户账号(合作编号)"  >
              <a-input placeholder="请输入用户账号" v-model="userInfo().username" :readOnly="true"/>
            </a-form-item>

            <a-form-item label="用户名称">
              <a-input placeholder="用户名称" v-decorator="[ 'realname', {rules: [{ required: true, message: '请输入用户名称!' }]}]"  />
            </a-form-item>

            <a-form-item label="性别"  >
              <a-select  v-decorator="[ 'sex', {}]" placeholder="请选择性别">
                <a-select-option :value="1">男</a-select-option>
                <a-select-option :value="2">女</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="手机号码"  >
              <a-input placeholder="请输入手机号码"  v-decorator="[ 'phone', validatorRules.phone]" />
            </a-form-item>

            <a-form-item label="微信号"  >
              <a-input placeholder="请输入微信号"  v-decorator="[ 'weChat',{}]" />
            </a-form-item>

            <a-form-item label="支付宝号"  >
              <a-input placeholder="请输入支付宝号"  v-decorator="[ 'alipay', {}]" />
            </a-form-item>

            <a-form-item>
              <a-button type="primary" @click="handleSubmit">提交</a-button>
<!--              <a-button style="margin-left: 8px">保存</a-button>-->
            </a-form-item>
          </a-form>
        </a-spin>

      </a-col>
      <!--      <a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
              <div class="ant-upload-preview" @click="$refs.modal.edit(1)" >
                <a-icon type="cloud-upload-o" class="upload-icon"/>
                <div class="mask">
                  <a-icon type="plus" />
                </div>
                <img :src="option.img"/>
              </div>
            </a-col>-->

    </a-row>


  </div>
</template>

<script>


import {mapGetters} from "vuex";
import pick from "lodash.pick";
import {editUserByme} from "@api/api";

export default {
  name:"my",
  data () {
    return {
      model: {},
      // cropper
      preview: {},
      confirmLoading:false,
      form:this.$form.createForm(this),
      validatorRules: {
        phone:{},
      },
    }
  },
  created () {
    this.edit(this.userInfo());
  },
  methods: {
    ...mapGetters(["userInfo"]),
    edit (record) {
      //console.log("record-->",record);
      let that = this;
      that.model = Object.assign({}, record);
      that.$nextTick(() => {
        that.form.setFieldsValue(pick(this.model,'username','sex','realname','email','phone','weChat','alipay','alipayReceipt','selectedroles'))
      });
    },
    handleSubmit () {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          let obj;
          let formData = Object.assign(this.model, values);
          formData.selectedroles=this.userInfo().rolestr;
          obj=editUserByme(formData);
          obj.then((res)=>{
            if(res.success){
              that.$message.success(res.message);
            }else{
              that.$message.warning(res.message);
            }
          });
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>

.avatar-upload-wrapper {
  height: 200px;
  width: 100%;
}

.ant-upload-preview {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 180px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;

  .upload-icon {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 1.4rem;
    padding: 0.5rem;
    background: rgba(222, 221, 221, 0.7);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  .mask {
    opacity: 0;
    position: absolute;
    background: rgba(0,0,0,0.4);
    cursor: pointer;
    transition: opacity 0.4s;

    &:hover {
      opacity: 1;
    }

    i {
      font-size: 2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -1rem;
      margin-top: -1rem;
      color: #d6d6d6;
    }
  }

  img, .mask {
    width: 100%;
    max-width: 180px;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>